<script setup lang="ts">
import {computed, defineProps, ref} from 'vue'
import {rate} from '../api/order.ts'

const score = ref()
const comment = ref('')
const orderId = ref()
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const disabled = computed(() => !score.value || !comment.value )
const props = defineProps<{
  orderId : number,
}>()
const emit = defineEmits(['finish'])
orderId.value = props.orderId
function close(){
  emit('finish')
}
function productRating(){
  rate({
    orderID : orderId.value,
    rating : score.value,
    commentContent : comment.value
  }).then(res =>{
    if (res.data.code === '000') {
      ElMessage({
        message: "评价成功",
        type: 'success',
        center: true,
      })
      close()
    }
    else{
      ElMessage({
        message: res.data.msg,
        type: 'error',
        center: true,
      })
    }
      })
}

</script>

<template>
  <div class = "rating_score">
    <span class = 'a'>请为该商品打分(1-5)</span>
    <el-rate v-model = "score" :colors="colors"></el-rate>
  </div>
  <el-divider></el-divider>
  <div class = "rating_comment">
    <el-input
        v-model = "comment"
        width = "500px"
        type = "textarea"
        placeholder="请输入评价"
    ></el-input>
  </div>
  <el-divider></el-divider>
  <el-button @click = "productRating" type = "primary" :disabled = "disabled">评价完成</el-button>


</template>

<style scoped>

.a{
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>